{extend name="base"/}
{block name="title"}svg学习{/block}
{block name="resource"}
<style>
    .container{
        width:640px;
        margin:10px auto;
    }
    .container .box{
        height:360px;
        background-image:url('ROOT_PATH/static/img/learn/svg/girl001.jpg');
        background-repeat: no-repeat;
        background-size:100% 100%;
        position: relative;
        border:1px solid #ccc;
    }
    .container .box .point{
        position: absolute;
        width:6px;
        height:6px;
        border:1px solid #ccc;
        background: #fff;
        transform: translateX(-50%) translateY(-50%);
    }
    /* 控制台样式 */
    .container .console{
        position: absolute;
        left:10px;
        top:10px;
    }
    /* 主菜单 */
    .container .console .menu .ul{
        list-style: none;
        width:30px;
        border:2px solid #ccc;
        border-radius: 4px;
        margin-bottom:10px;
        overflow: hidden;
    }
    .container .console .menu .ul:last-child{
        margin-bottom:0;
    }
    .container .console .menu .ul .li{
        list-style: none;
        height: 30px;
        border-bottom:1px solid #ccc;
        cursor: pointer;
        background: #fff;
        background-image: url('ROOT_PATH/static/img/learn/svg/spritesheet.svg');
        background-repeat: no-repeat;
        background-size: 300px 30px;
        display: flex;
        justify-content: center;
        align-content: center;
        font-size: 20px;
    }
    .container .console .menu .ul .li:last-child{
        border:none;
    }
    .container .console .menu .ul .li.in{
        background-position: 30px 0px;
    }
    .container .console .menu .ul .li.out{
        background-position: 30px 0px;
    }
    .container .console .menu .ul .li.polyline{
        background-position: 0px 0px;
    }
    .container .console .menu .ul .li.polygon{
        background-position: -30px 0px;
    }
    .container .console .menu .ul .li.rectangle{
        background-position: -60px 0px;
    }
    .container .console .menu .ul .li.circle{
        background-position: -90px 0px;
    }
    .container .console .menu .ul .li.marker{
        background-position: -120px 0px;
    }
    .container .console .menu .ul .li.circlemarker{
        background-position: -270px 0px;
    }
    .container .console .menu .ul .li.edit{
        background-position: -210px 0px;
    }
    .container .console .menu .ul .li.delete{
        background-position: -180px 0px;
    }
    /* 子菜单 */
    .container .console .child-menu.ul{
        position: absolute;
        left:34px;
        top:108px;
        border-radius: 0 4px 4px 0;
        white-space: nowrap;
        overflow: hidden;
    }
    .container .console .child-menu.ul .li{
        display: inline-block;
        padding:0px 6px;
        font-size:12px;
        color:#fff;
        border-left:1px solid #fff;
        background:rgba(0, 0, 0, 0.5);
        white-space: nowrap;
        margin-left:-5px;
        cursor: pointer;
        line-height:30px;
    }
    .container .console .child-menu.ul .li:first-child{
        border-left:0;
        padding-left:11px;
    }
</style>
{/block}
{block name="body"}
<div class="container" id="container">
    <div class="box"
         @mousewheel="boxMouseWheel"
         @mousedown="boxMouseDown"
         @mousemove="boxMouseMove"
         @mouseup="boxMouseUp"
         @click="boxClick"
         :style="{backgroundSize:boxBgStyle.width + '% '+ boxBgStyle.height +'%', backgroundPosition:boxBgStyle.left + 'px ' + boxBgStyle.top + 'px'}"
    >
        <div class="console">
            <div class="menu">
                <div class="ul">
                    <div class="li in">+</div>
                    <div class="li out">-</div>
                </div>
                <div class="ul">
                    <div class="li polyline"></div>
                    <div class="li polygon" @click.stop="alterActive"></div>
                    <div class="li rectangle"></div>
                    <div class="li circle"></div>
                    <div class="li marker"></div>
                    <div class="li circlemarker"></div>
                </div>
                <div class="ul">
                    <div class="li edit"></div>
                    <div class="li delete"></div>
                </div>
            </div>
            <div class="child-menu ul" v-if="isActive">
                <div class="li" @click="completeProcess">完成</div>
                <div class="li" @click="deletePoint">删除节点</div>
                <div class="li" @click="cancelProcess">取消</div>
            </div>
        </div>
        <template v-if="provessData">
            <template v-for="(point, index) in provessData.p">
                <div class="point" :style="{left:point.x + 'px', top: point.y + 'px'}" @click.stop="pointClick(index)"></div>
            </template>
        </template>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="640" height="360">
            <template v-for="item in completeData">
                <g><path :d="item.d" fill="lime" fill-opacity="0.1" stroke="lime" stroke-width="2"/></g>
            </template>
            <g v-if="provessData"><path :d="provessData.d" fill="lime" fill-opacity="0.1" stroke="lime" stroke-width="2"/></g>
        </svg>
    </div>
    <div class="test" style="height:100px;background:red;"></div>
</div>
{/block}
{block name="script"}
<script>
    var vm = new Vue({
        el: '#container',
        data:{
            boxInitData:{
                width: 640,
                height: 360,
            },
            boxBgStyle:{
                width: 100,
                height: 100,
                left: 0,
                top: 0,
            },
            isMouseDown:false,
            mouseDownPosition:{
                x: null,
                y: null,
            },
            mouseDownBoxBgPosition:{
                x: null,
                y: null,
            },
            isActive:false,
            isProcess:false,
            completeData:[
                // {
                // 	p:[{x:150, y:0}, {x:75, y:200}, {x:225, y:200}],
                // 	d:'M150 0 L75 200 L225 200 Z',
                // },
            ],
            provessData:null,
        },
        methods:{
            /***************************** 图片缩放、拖动 start ***********************************/
            boxMouseWheel: function(e){
                let unitNum = 4;
                let width = this.boxBgStyle.width;
                let height = this.boxBgStyle.height;
                let offsetX = (this.boxInitData.width * unitNum / 100);
                let offsetY = (this.boxInitData.height * unitNum / 100);
                if(e.wheelDelta < 0){
                    width -= unitNum;
                    height -= unitNum;
                    offsetX *= -1;
                    offsetY *= -1;
                }else{
                    width += unitNum;
                    height += unitNum;
                }
                if(width > 100 && height > 100){
                    let percentX = (e.clientX - this.boxBgStyle.left) / (this.boxInitData.width * width / 100);
                    let percentY = (e.clientY - this.boxBgStyle.top) / (this.boxInitData.height * height / 100);
                    percentX = percentX.toFixed(4);
                    percentY = percentY.toFixed(4);
                    let left = this.boxBgStyle.left - offsetX * percentX;
                    let top = this.boxBgStyle.top - offsetY * percentY;
                    this.boxBgStyle.width = width;
                    this.boxBgStyle.height = height;
                    this.boxBgStyle.left = left;
                    this.boxBgStyle.top = top;
                }
            },
            boxMouseDown: function(e){
                this.isMouseDown = true;
                this.mouseDownPosition = {
                    x: e.clientX,
                    y: e.clientY,
                }
                this.mouseDownBoxBgPosition = {
                    x: this.boxBgStyle.left,
                    y: this.boxBgStyle.top,
                }
            },
            boxMouseUp: function(){
                this.isMouseDown = false;
                this.mouseDownPosition = {
                    x: null,
                    y: null,
                }
                this.mouseDownBoxBgPosition = {
                    x: null,
                    y: null,
                }
                if(this.boxBgStyle.width <= 110){
                    if(this.boxBgStyle.left != 0 || this.boxBgStyle.top != 0){
                        this.boxBgStyle.left = 0;
                        this.boxBgStyle.top = 0;
                    }
                }
            },
            boxMouseMove: function(e){
                if(this.isMouseDown){
                    let left = (this.mouseDownBoxBgPosition.x + e.clientX - this.mouseDownPosition.x);
                    let top = (this.mouseDownBoxBgPosition.y + e.clientY - this.mouseDownPosition.y);
                    this.boxBgStyle.left = left;
                    this.boxBgStyle.top = top;
                }
            },
            /***************************** 图片缩放、拖动 end ***********************************/
            /***************************** 绘制多边形 start ***********************************/
            alterActive: function(){
                console.log(1);
                if(!this.isProcess){
                    this.isActive = !this.isActive;
                }
            },
            completeProcess: function(){
                if(!this.provessData){
                    return;
                }
                if(this.provessData.p.length <= 2){
                    return;
                }
                //闭合路径
                this.provessData.d += ' Z';
                this.completeData.push(this.provessData);
                this.provessData = null;
                this.isProcess = false;
                this.isActive = false;
            },
            deletePoint: function(){
                if(!this.provessData){
                    return;
                }
                if(this.provessData.p.length == 0){
                    return;
                }
                this.provessData.p.pop();
                let d = '';
                this.provessData.p.forEach(function(point, index){
                    let commend = index ? 'L' : 'M';
                    d += commend + point.x + ' ' + point.y;
                })
                //d += ' Z';
                this.provessData.d = d;
            },
            cancelProcess: function(){
                this.isProcess = false;
                this.isActive = false;
                this.provessData = null;
            },
            boxClick: function(e){
                if(!this.isActive){
                    return;
                }
                if(!this.isProcess){
                    this.isProcess = true;
                    this.provessData = {p:[], d:''}
                }
                if(this.isProcess){
                    this.provessData.p.push({x: e.offsetX, y:e.offsetY});
                    let d = '';
                    this.provessData.p.forEach(function(point, index){
                        let commend = index ? 'L' : 'M';
                        d += commend + point.x + ' ' + point.y;
                    })
                    //d += ' Z';
                    this.provessData.d = d;
                }
            },
            pointClick: function(index){
                if(!this.provessData){
                    return;
                }
                if(this.provessData.p.length <= 2){
                    return;
                }
                if(index != 0){
                    return;
                }
                //闭合路径
                this.provessData.d += ' Z';
                this.completeData.push(this.provessData);
                this.provessData = null;
                this.isProcess = false;
                this.isActive = false;
            },
            /***************************** 绘制多边形 end ***********************************/
        },
        filters:{

        },
        computed:{

        },
        watch:{

        }
    })
</script>
{/block}

